<template>
	<!-- title部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoIndex"></image>
		<view class="titlebox-titletext">意见反馈</view>
	</view>
	<!-- problem部分 -->
	<view class="problem">
		<view class="problem-text">问题类型</view>
		<view class="problem-suggestbox">
			<view class="problem-suggestbox-suggest">
				<view class="problem-suggestbox-suggest-text1">功能异常</view>
				<view class="problem-suggestbox-suggest-text2">内容报错、卡顿、错位等</view>
			</view>

			<view class="problem-suggestbox-suggest">
				<view class="problem-suggestbox-suggest-text1">产品改进</view>
				<view class="problem-suggestbox-suggest-text2">反馈产品及服务优化建议</view>
			</view>
		</view>
	</view>
	<!-- describe部分 -->
	<view class="describe">
		<view class="describebox">
			<view class="describebox-text">反馈描述</view>

			<view class="describebox-inputtext">
				<textarea placeholder-style="color:#bababa" placeholder="说说您的建议或问题,以便我们提供更好的服务(5个字以上)"
					class="describebox-inputtext-textbox"></textarea>
			</view>
			<view class="tabbar">
				<scroll-view class="scroll" scroll-x>
					<!-- scroll-x 是放在组件中的不在css里面  作用是横向滑动 -->
					<view class="group">
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
						<view class="item">
							<image class="item-img" src="../../static/添加图片.png"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<!-- 联系方式 -->
	<view class="contact-information">
		<view class="information-textbox">
			<view class="information-textbox-text1">联系方式（选填）</view>
			<input type="text" class="information-textbox-text2" placeholder="请输入您的手机号">
		</view>
	</view>

	<!-- 按钮 -->
	<button>提交反馈</button>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	.titlebox {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 		margin-bottom: 10px; */
		/* 添加这一行来水平居中 */
		/* background: rgb(241, 224, 84); */
	}

	/* title部分样式 */
	.titlebox-backimg {
		width: 15px;
		height: 15px;
	}

	.titlebox-titletext {
		margin-left: auto;
		margin-right: auto;
		font-size: 15px;
		/* color: #333; */
		font-weight: 600;
	}

	/* problem部分 */
	.problem {
		width: 91%;
		padding: 2%;
		background: white;
		margin: 0 auto;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.problem-text {
		font-size: 15px;
		padding: 2%;
		font-weight: 500;
	}

	.problem-suggestbox {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.problem-suggestbox-suggest {
		padding: 2%;
		text-align: center;
		border-radius: 5px;
		border: 1px solid yellow;
	}

	.problem-suggestbox-suggest-text1 {
		font-size: 15px;
		margin-bottom: 5px;
	}

	.problem-suggestbox-suggest-text2 {
		font-size: 13px;
		color: rgb(120, 120, 120);
	}

	/* 反馈部分 */
	.describe {
		padding: 2%;
		width: 91%;
		margin: 0 auto;
		background: white;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.describebox-text {
		padding: 2%;
		font-size: 15px;
	}

	.describebox-inputtext {
		padding: 2%;
	}

	/* 添加图片部分 */
	.tabbar {
		margin: 0 auto;
		background: white;
		border-radius: 10px;
	}

	.scroll {
		box-sizing: border-box;
	}

	.group {
		white-space: nowrap;
	}

	.item {
		margin-right: 20px;
		text-align: center;
		font-size: 30rpx;
		width: 60px;
		display: inline-block;
	}

	.item-img {
		display: block;
		width: 70px;
		height: 70px;
	}

	/* 联系方式部分 */
	.contact-information {
		width: 91%;
		padding: 2%;
		margin: 0 auto;
		border-radius: 5px;
		margin-bottom: 15px;
		background: white;
	}

	.information-textbox {
		font-size: 15px;
	}

	.information-textbox-text1 {
		font-size: 15px;
		padding: 2%;

	}

	.information-textbox-text2 {
		font-size: 15px;
		color: rgb(120, 120, 120);
		padding: 2%;

	}

	button {
		background: rgb(241, 224, 84);
		width: 91%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40px;
		font-size: 15px;
	}
</style>
